<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id" style="width:160px">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable placeholder="选择业务类型" v-model="formInline.type" style="width:160px" @change="searchClick">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row show-summary :data="list" size="small" v-loading.body="listLoading" border :summary-method="getSummaries">
        <el-table-column align="center" prop="type_name" label="业务名称" sortable sort-by="type_name_first"></el-table-column>
        <el-table-column align="center" prop="channel" label="渠道"></el-table-column>
        <el-table-column align="center" prop="times" label="业务数量" sortable>
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row)">
              {{scope.row.times}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="money" label="业务金额" sortable>
          <template slot-scope="scope">
            <el-button type="text" @click="showInfo(scope.row)">
              {{scope.row.showMoney}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :close-on-click-modal="false" title="销售详情" :visible.sync="infoDialog">
      <el-table highlight-current-row :data="infoData" border show-summary>
        <el-table-column align="center" property="type_name" label="业务名称" sortable sort-by="type_name_first"></el-table-column>
        <el-table-column align="center" property="times" label="业务数量" sortable></el-table-column>
        <el-table-column align="center" property="showMoney" label="业务金额" sortable sort-by="money"></el-table-column>
        <el-table-column align="center" property="nick" label="操作员工" sortable sort-by="nick_first"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { getList, getClerkList, getStoreList } from '@/api/storage_control/sellAllFinance';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  data() {
    return {
      list: [],
      listLoading: false,
      infoDialog: false,
      storeList: null,
      typeList: [
        { id: '1', name: '商品销售' },
        { id: '2', name: '活动套餐' },
        { id: '3', name: '物品销售' },
        { id: '4', name: '门票类套餐' },
        { id: '5', name: '核销类套餐' },
        { id: '6', name: '星星卡套餐' },
        { id: '7', name: '发卡机套餐' },
        { id: '8', name: '小程序销售' },
        { id: '9', name: '凭证兑换' }
      ],
      formInline: {
        store_id: '',
        begin_time: '',
        type: '',
        end_time: '',
        look_del: '0'
      },
      infoData: [],
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    showInfo(row) {
      this.infoData = [];
      this.infoData = row.detail;
      this.infoDialog = true;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]));
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index > 0) {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = index === 2 ? sums[index] : (sums[index] * 1).toFixed(2);
          } else {
            sums[index] = '-';
          }
        }
      });
      return sums;
    },
    getStore() {
      getStoreList({ look_del: this.formInline.look_del, category_id: 284 }).then(response => {
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (response.length > 0) {
            this.formInline.store_id = response[0].id;
          }
        }
        this.storeList = response;
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0].replace(/\./g, '-') : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1].replace(/\./g, '-') : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(res => {
          if (res.code == 1) {
            res.message.forEach(val => {
              val.money /= 1;
              val.showMoney = (val.money / 1).toFixed(2);
              val.detail.forEach(item => {
                val.channel = item.channel;
                item.money /= 1;
                item.showMoney = (item.money / 1).toFixed(2);
              });
            });
            this.list = res.message;
          }
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>